<template>
	<div class="content">
		<div class="center-box">
			<div class="card-box" v-for='(item,index) in arr' :key='index'>
				<div class="title">
					{{index+1}}、{{item.name}}
					<span v-if='item.type=="image"'>,{{item.field.length}}/{{item.maxNum||1}} </span>
					<span v-if='item.type=="radio"'>(单选,{{ item.isAnswer?'必填':'选填' }})</span>
					<span v-else-if='item.type=="checkbox"'>(多选,{{ item.isAnswer?'必填)':'选填' }})</span>
					<span v-else-if='item.type!=="desc"'>{{ item.isAnswer?'(必填)':'(选填)' }}</span>
				</div>
				<!-- 多项填空 -->
				<div class='fill-box' v-if='item.type=="fill"'>
					<div class='fill-item' v-for='(items,indexs) in item.field' :key='indexs'>
						<input v-model='items.value' :maxlength="item.maxNum" type="text" placeholder="请输入">
					</div>	
				</div>
				<!-- 多行文本 -->
				<div class='textarea-box' v-else-if='item.type=="textarea"'>
					<textarea v-model='item.answer' :maxlength="item.maxNum||300" placeholder="请输入"></textarea>
					<div class="num-box">{{item.answer.length}}/{{item.maxNum||300}}</div>
				</div>
				<!-- 单行文本 -->
				<div class='input-box' v-else-if='item.common=="input"&&item.type!=="textarea"&&item.type!=="fill"'>
					<input v-model='item.answer' :maxlength="item.maxNum||30" :type="item.type" placeholder="请输入">
				</div>
				<!-- 上传图片 -->
				<div class='upload-img' v-else-if='item.type=="image"'>
					<div class="upload-item" v-for='(items,indexs) in item.field' :key='indexs'>
						<div class="item">
							<img :src="urls + items" mode="aspectFill"/>
							<div class="delete-ico">x</div>
						</div>
					</div>
					<div class="upload-item" v-if='!item.field.length||item.field.length<item.maxNum'>
						<div class="item">
							<div class="upload-ico">＋上传</div>
						</div>
					</div>
				</div>
				<!-- 上传文件 -->
				<div class='upload-file' v-else-if='item.type=="file"'>
					<div class="upload-btn">
					  {{ item.answer?'已上传文件：'+item.answer.split('/')[3]:'＋上传文件'}}
					</div>
					<div v-if='item.answer' class="delete-ico">x</div>
				</div>
				<!-- 手写签名 -->
				<div class='upload-sign' v-else-if='item.type=="signature"'>
					<img v-if='item.answer' :src="urls+item.answer" mode="heightFix"/>
					<div v-else class="sign-btn">点击手写您的签名</div>
					<div v-if='item.answer' class="delete-ico">x</div>
				</div>
				<!-- 单选/多选 -->
				<div class='select-box' v-else-if='item.type=="radio"||item.type=="checkbox"'>
					<div class='select-item' v-for='(items,indexs) in item.field' :key='indexs'>
						<div v-if='item.type=="radio"'>
							<img v-if='items.isSelect' src="../assets/common/radio-is.png"/>
							<img v-else src="../assets/common/radio-no.png"/>
						</div>
						<div v-else-if='item.type=="checkbox"'>
							<img v-if='items.isSelect' src="../assets/common/checkbox-is.png"/>
							<img v-else src="../assets/common/checkbox-no.png"/>
						</div>
						<div class='name'>{{ items.label }}</div>
					</div>
				</div>
				<!-- 年月日 -->
				<div class="date-box" v-else-if='item.type=="date"'>
					<div class="btn" :style='{color: item.answer?"":"#999"}'>{{ item.answer || '请选择' }}</div>
				</div>
				<!-- 时分秒 -->
				<div class="time-box" v-else-if='item.type=="time"'>
					<div class="btn" :style='{color: item.answer?"":"#999"}'>{{ item.answer || '请选择' }}</div>
				</div>
				<!-- 下拉框 -->
				<div class="down-box" v-else-if='item.type=="select"'>
					<div class="btn" :style='{color: item.answer?"":"#999"}'>{{ item.answer || '请选择' }}</div>
				</div>
				<!-- 省 -->
				<div class="date-box" v-else-if='item.type=="city_p"'>
					<div class="btn" :style='{color: item.answer?"":"#999"}'>{{ item.answer || '请选择' }}</div>
				</div>
				<!-- 省市 -->
				<div class="date-box" v-else-if='item.type=="city_pc"'>
					<div class="btn" :style='{color: item.answer?"":"#999"}'>{{ item.answer || '请选择' }}</div>
				</div>
				<!-- 省市区 -->
				<div class="date-box" v-else-if='item.type=="city_pcd"'>
					<div class="btn" :style='{color: item.answer?"":"#999"}'>{{ item.answer || '请选择' }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data() {
			return {
				arr: [],
			}
		},
		mounted(e){
			this.arr = JSON.parse(localStorage.getItem('arr'))
			console.log('问卷列表：', this.arr);
		},
	}
</script>

<style lang='scss' scoped>
	.center-box{
		box-sizing: border-box;
		padding: 12px 10px;
		margin: 0 auto;
		width: 500px;
		height: 100vh;
		overflow: auto;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		background-color: #f5f5f5;
		.card-box{
			box-sizing: border-box;
			padding: 12px 10px;
			background-color: #fff;
			border-radius: 5px;
			margin-bottom: 10px;
			/* 题目 */
			.title{
				font-size: 14px;
				color: #333;
				word-break: break-all;
				word-wrap: break-word;
				padding-left: 7px;
				border-left: 5px solid #02C176;
				word-break: break-all;
				word-wrap: break-word;
			}
			/* 多项填空 */
			.fill-box{
				.fill-item{
					margin-top: 10px;
				}
			}
			/* 单行文本 */
			.input-box{
				margin-top: 10px;
			}
			/* 单行输入框 */
			input{
				box-sizing: border-box;
				padding: 0 10px;
				width: 100%;
				height: 45px;
				font-size: 14px;
				background-color: #f5f5f5;
				border-radius: 7px;
			}
		  input,textarea{
				border: 0;
				outline: none;
			}
			/* 表单提交文本域 */
			.textarea-box{
				margin-top: 10px;
				position: relative;
				box-sizing: border-box;
				padding: 10px 10px 20px;
				background-color: #f5f5f5;
				border-radius: 5px;
				textarea{
					width: 100%;
					height: 100px;
					line-height: 22px;
					font-size: 14px;
					background-color: #f5f5f5;
					word-break: break-all;
					word-wrap: break-word;
				}
				.num-box{
					position: absolute;
					right: 2px;
					bottom: 2px;
					color: #999;
					font-size: 11px;
				}
			}
			/* 上传图片 */
			.upload-img{
				margin-top: 10px;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.upload-item{
					width: 33.33%;
					.item{
						width: 95%;
						position: relative;
						image{
							width: 100px;
							height: 100px;
							line-height: 100px;
							text-align: center;
							background-color: #f5f5f5;
							border-radius: 5px;
						}
						.upload-ico{
							width: 100px;
							height: 100px;
							line-height: 100px;
							text-align: center;
							font-size: 13px;
							color: #999;
							border: 1px dashed #999;
							border-radius: 5px;
						}
						.delete-ico{
							position: absolute;
							top: -5px;
							right: 0;
							z-index: 99;
							width: 16px;
							height: 16px;
							background-color: red;
							color: #fff;
							font-size: 12px;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
			/* 上传文件 */
			.upload-file{
				margin-top: 10px;
				position: relative;
				.upload-btn{
					box-sizing: border-box;
					padding: 12px;
					width: 100%;
					text-align: center;
					border: 1px dashed #999;
					border-radius: 7px;
					font-size: 13px;
					color: #999;
					word-break: break-all;
					word-wrap: break-word;
				}
				.delete-ico{
					position: absolute;
					top: -5px;
					right: 0;
					z-index: 99;
					width: 16px;
					height: 16px;
					background-color: red;
					color: #fff;
					font-size: 12px;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			/* 手写签名 */
			.upload-sign{
				margin-top: 10px;
				width: 100%;
				height: 130px;
				display: flex;
				justify-content: center;
				position: relative;
				.sign-btn{
					width: 100%;
					height: 130px;
					line-height: 130px;
					text-align: center;
					border: 1px dashed #999;
					border-radius: 5px;
					font-size: 13px;
					color: #999;
				}
				img{
					width: 100%;
					height: 325px;
					border-radius: 5px;
					transform: rotateZ(-90deg) translateX(200rpx);
					border: 1px dashed #999;
				}
				.delete-ico{
					position: absolute;
					top: -10px;
					right: 0;
					z-index: 99;
					width: 16px;
					height: 16px;
					background-color: red;
					color: #fff;
					font-size: 12px;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			/* 单选/多选 */
			.select-box{
				.select-item{
					margin-top: 12px;
					display: flex;
					align-items: center;
					img{
						width: 16px;
						height: 16px;
					}
					.name{
						margin-left: 7px;
						font-size: 14px;
						color: #333;
					}
				}
			}
			/* 选择按钮 */
			.date-box,.time-box,.city-box,.down-box{
				margin-top: 10px;
				.btn{
					box-sizing: border-box;
					padding: 0 10px;
					width: 100%;
					height: 45px;
					line-height: 45px;
					font-size: 14px;
					color: #000;
					background-color: #f5f5f5;
					border-radius: 7px;
				}
			}
		}
	}
</style>